
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { useRole } from "@/contexts/RoleContext";
import { useLanguage } from "@/contexts/LanguageContext";
import { GraduationCap, User, RefreshCw } from "lucide-react";

export const RoleSwitcher = () => {
  const { role, switchRole } = useRole();
  const { t } = useLanguage();

  if (!role) return null;

  const isStudent = role === 'student';
  const currentRoleIcon = isStudent ? <User className="w-4 h-4" /> : <GraduationCap className="w-4 h-4" />;
  const currentRoleText = isStudent ? t('role.student') : t('role.teacher');
  const currentRoleColor = isStudent ? 'bg-blue-100 text-blue-700 border-blue-200' : 'bg-green-100 text-green-700 border-green-200';
  const switchToRole = isStudent ? t('role.teacher') : t('role.student');

  return (
    <div className="flex items-center gap-2">
      <Badge className={`px-3 py-1 ${currentRoleColor}`}>
        {currentRoleIcon}
        <span className="ml-1">{currentRoleText}</span>
      </Badge>
      <Button
        variant="outline"
        size="sm"
        onClick={switchRole}
        className="h-8 px-3 text-sm hover:bg-gray-50"
        title={t('role.switchTo').replace('{role}', switchToRole)}
      >
        <RefreshCw className="w-4 h-4" />
      </Button>
    </div>
  );
};
